import Editor from 'for-editor';
import { useEffect, useState } from 'react';
import styles from './index.less';
import './style.less';
import {
  Button,
  Popconfirm,
  Drawer,
  Input,
  InputNumber,
  message,
  Popover,
  Select,
  Switch,
  Image,
} from 'antd';
import {
  IRouteComponentProps,
  OwnspaceModelState,
  useDispatch,
  useSelector,
  viewModelState,
} from 'umi';
import {
  CloseOutlined,
  EllipsisOutlined,
  FileImageOutlined,
} from '@ant-design/icons';
const { Search, TextArea } = Input;
const { Option } = Select;
const Editors: React.FC<IRouteComponentProps<{ id: string }>> = (props) => {
  const { fileList, flileLength, fileEdit } = useSelector(
    (state: { view: viewModelState }) => state.view,
  );
  //获取标签
  const { tagList } = useSelector(
    (state: { ownspace: OwnspaceModelState }) => state.ownspace,
  );
  //获取分类
  const { categoryList } = useSelector(
    (state: { ownspace: OwnspaceModelState }) => state.ownspace,
  );
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch({
      type: 'view/getFileList',
    });
  }, []);
  //获取标签
  useEffect(() => {
    dispatch({
      type: 'ownspace/getTagList',
    });
  },[]);
  //获取分类
  useEffect(() => {
    dispatch({
      type: 'ownspace/getCategoryList',
    });
  }, []);
  console.log(tagList,categoryList,'categoryList...');
  
  const [value, setValue] = useState('');
  const [title, setTitle] = useState('');
  const [cover, setCover] = useState('');
  const [abstract, setAbstract] = useState('');
  const [path, setPath] = useState('');
  const [order, setOrder] = useState(0);
  const [visible, setVisible] = useState(false);
  const submit = () => {
    setVisible(true);
    console.log(value, title);
  };
  const onClose = () => {
    setVisible(false);
  };

  const onSaveDraft = () => {};
  const onAbstract = () => {};
  const onComment = () => {};
  const onRecommend = () => {};
  const content = (
    <div>
      <p style={{ cursor: 'not-allowed', color: '#ccc' }}>查看</p>
      <p onClick={submit} style={{ cursor: 'pointer' }}>
        设置
      </p>
      <p onClick={onSaveDraft} style={{ cursor: 'pointer' }}>
        保存草稿
      </p>
      <p style={{ cursor: 'not-allowed', color: '#ccc' }}>删除</p>
    </div>
  );
  function handleChange(value: string) {
    console.log(`selected ${value}`);
  }
  return (
    <div className={styles.editor_home}>
      <header className={styles.editor_id_header}>
        <div className={styles.editor_id_ghost}>
          <div className={styles.editor_id_content}>
            <div>
              <Popconfirm
                title="确认关闭？如果有内容变更，请先保存"
                placement="right"
                onConfirm={() => {
                  props.history.push('/article');
                }}
                okText="确认"
                cancelText="取消"
              >
                <button className={styles.amEditor_button_close}>
                  <CloseOutlined />
                </button>
              </Popconfirm>
              <span className={styles.editor_input_title}>
                <input
                  type="text"
                  placeholder="请输入文章名称"
                  value={title}
                  onChange={(e) => {
                    setTitle(e.target.value);
                  }}
                />
              </span>
            </div>
            <span>
              <Button htmlType="submit" type="primary">
                <span>发布</span>
              </Button>
              <Popover placement="bottom" content={content}>
                <EllipsisOutlined
                  style={{
                    marginLeft: '20px',
                    cursor: 'pointer',
                    color: '#0188fb',
                  }}
                />
              </Popover>
            </span>
          </div>
        </div>
      </header>
      <main className="editor_main">
        <Editor
          value={value}
          onChange={(value) => setValue(value)}
          preview={true}
          subfield={true}
        />
      </main>
      <Drawer
        title="页面属性"
        placement="right"
        onClose={onClose}
        visible={visible}
        width="480px"
        className="editor_drawer"
      >
        <div className="editor_drawer_list">
          <span>文章摘要</span>
          <div>
            <TextArea
              value={abstract}
              onChange={onAbstract}
              placeholder="请输入文章摘要"
              autoSize={{ minRows: 7, maxRows: 5 }}
            />
          </div>
        </div>
        <div className="editor_drawer_list">
          <span>访问密码</span>
          <div>
            <Input.Password placeholder="输入后查看需要密码" />
          </div>
        </div>
        <div className="editor_drawer_list">
          <span>付费查看</span>
          <div>
            <Input.Password placeholder="输入后需要支付的费用" />
          </div>
        </div>
        <div className="editor_drawer_list">
          <span>开启评论</span>
          <div>
            <Switch defaultChecked onChange={onComment} />
          </div>
        </div>
        <div className="editor_drawer_list">
          <span>首页推荐</span>
          <div>
            <Switch defaultChecked onChange={onRecommend} />
          </div>
        </div>
        <div className="editor_drawer_list">
          <span>选择分类</span>
          <div>
            <Select
              defaultValue=""
              onChange={handleChange}
              style={{ width: '100%' }}
            >
              {
                categoryList.map((item,index)=>{
                  return  <Option key={index}>{item.label}</Option>
                })
              }
            </Select>
          </div>
        </div>
        <div className="editor_drawer_list">
          <span>选择标签</span>
          <div>
            <Select
              mode="tags"
              style={{ width: '100%' }}
              placeholder="Tags Mode"
              onChange={handleChange}
            >
              {
                categoryList.map((item,index)=>{
                  return  <Option key={index}>{item.label}</Option>
                })
              }
            </Select>
          </div>
        </div>
        <div className="editor_drawer_list">
          <span>文章封面</span>
          <div>
            <Image
              width={"100%"}
              height={180}
              src="error"
              fallback=""
            />
            <Input />
            <Button>移除</Button>
          </div>
        </div>
        <div
          style={{
            position: 'absolute',
            bottom: '0px',
            width: '100%',
            borderTop: '1px solid rgb(232, 232, 232)',
            padding: '10px 16px',
            textAlign: 'right',
            left: '0px',
            background: 'rgb(255, 255, 255)',
            borderRadius: '0px 0px 4px 4px',
          }}
        >
          <Button type="primary">确认</Button>
        </div>
      </Drawer>
    </div>
  );
};
export default Editors;
